
<style lang="sass" scoped>
	
/* 新弹窗*/
.brandsDetailLayer{
	position:fixed;
	left: 0px;
	top:0px;
	bottom: 0px;
	z-index: 100;
	width: 100%;
	opacity: 0;
    overflow-x: hidden;
	overflow-y: hidden;
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    .layerContent{
    	width:100%;
    	height: 100%;
    	overflow: auto;
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	background: #fff;
    	overflow-y:auto;
    	border-radius: 0.5rem;
    	background-color: #F5F5F5;
    	.layerTitle{
			width: 100%;
			height:4rem;
			line-height: 4rem;
			padding: 0 1rem;
			color:#CB1620;
			border-bottom: 1px solid #E5E5E5;
			position: relative;
			span{
				font-size: 1.5rem;
			}
			i{
				position: absolute;
				right: 10px;
				color: #ccc;
				font-size: 1.5rem;
				padding: 0 10px;
			}
		}
		.layerInfo{
			width: 100%;
			overflow: auto;
			-webkit-box-flex: 1;
			padding: 0 10px;
			.layerInfo_icon{
				width: 100%;
				height: auto;
				padding-top: 1rem;
				img{
					display: block;
				    max-width: 100%;
				    height: auto;
				    margin: 0 auto;
				    max-height: 18rem;
				    vertical-align: middle;
				}
			}
			.layerInfo_meg{
				border:1px solid #d6e9c6;
				border-radius: 4px;
				height: 50rem;
				margin-top: 10px;
				margin-bottom: 10px;
				padding: 10px 20px;
				height: auto;
			    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			}
			.layerInfo_meg_con{
				font-size: 1.3rem;
				.companyTitle{
					color: #CB1620;
					font-weight: 600;
					margin: 0.5rem 0rem;
				}
				.content_item{
					margin: 0.5rem 0rem;
					font-size: 1.3rem;
					p{
						color: #CB1620;
						font-weight: 600;
						margin: 0.5rem 0rem;
					}
					span{
						color: #333;
						display: inline-block;
					}
				}
				
				
			}
		}
		
		.layerFooter{
			width: 100%;
			height: 5rem;
			-webkit-box-pack: end;
			-webkit-box-align: end;
			display: -webkit-box;
			-webkit-box-align: center;
			padding:1rem;
			border-top:1px solid #E5E5E5;
			span{
				font-size: 1.2rem;
				height: 100%;
				line-height: 3rem;
				padding: 0 15px;
				color: #fff;
				border-radius: 0.5rem;
				background: #1973BF;
				display: inline-block;
			}
		}
		.content_mend{
			width: 100%;
			height: auto;
			margin: 0.2rem 0rem;
			display: -webkit-box;
			line-height: 2rem;
			dd{
				-webkit-box-flex: 1;
			}
		}
		
    }
    
}

/*上下弹动动画*/
.smallAnimate-transition{
    transform: translateY(0);
    opacity: 1;
    transition:all .2s linear;
}
.smallAnimate-enter,.smallAnimate-leave{
    transform: translateY(-100%);
    opacity: 0;
    z-index: 0;
}
</style>
<template>
	<div class="brandsDetailLayer" transition="smallAnimate">
		<div class="layerContent">
			<div class="layerTitle">
				<span>油品详情</span>
				<i class="close iconfont icon-artboard1" v-touch:tap="closeLayer"></i>
			</div>
			<div class="layerInfo">
				<div class="layerInfo_icon" v-if="pic">
					<img :src="pic"/>
				</div>
				<div class="layerInfo_meg">
					<div class="layerInfo_meg_con">
						<!--<p class="companyTitle">恒运{{product_code ? product_code : ''}}变速箱油</p>-->
						<p class="companyTitle" >{{codeName ? codeName : ''}}</p>
						<template v-if="classify">
							<div class="content_item">
								<p>分类:</p>
								<span>{{classify}}</span>
							</div>
						</template>
						<template v-if="feature && feature.length > 0">
							<div class="content_item">
								<p>性能特点：</p>
								<span v-for="item in feature">◎ {{item}}</span>
							</div>
						</template>
						<template v-if="spec && spec.length > 0">
							<div class="content_item">
								<p>推荐规格：</p>
								<dl class="content_mend" v-for="item in spec">
									<dt>{{item.split('：')[0]}}:</dt>
									<dd>{{item.split('：')[1]}}</dd>								
								<dl>
							</div>
						</template>
					</div>
				</div>
			</div>
			<div class="layerFooter">
				<span class="closeLayerBtn" v-touch:tap="closeLayer">关闭</span>
			</div>
		</div>
	</div>
</template>

<script>
	module.exports = {
		// layerShow 是否显示弹窗 name 公司名称 productCode code
		props:['layerShow','name','productCode','codeName'],
		ready(){
			// 获取详情数据
			this.getProductDetail()
			console.log(this.codeName)
		},
		data: {
			product_code: '',
			classify: '',        // 分类
			feature: [],         // 性能特性
			pic: '',             // 图片
			spec: []			// 推荐规格	
			
		},
		methods: {
			closeLayer(){
				this.$set('layerShow',false)
				let app = document.getElementById('app')
					app.style.overflow = 'auto'
			},
			getProductDetail() {
				HQ.callProductApi('getProductDetail',{
					'compCode':this.name,
					'productCode': this.productCode
				},this.getDetailCallBack);
			},
			getDetailCallBack(data) {
				if (data.number == 200) {
					this.product_code = data.result.product_code
					this.$set('classify',data.result.classify)
					this.pic = data.result.pic ? data.result.pic : ''
					this.feature = data.result.feature ? data.result.feature : []
					this.spec = data.result.spec ? data.result.spec : []
				}
			}
		}
		
		
		
	}
</script>


